<template>
  <div>
    <!-- 页头 -->
    <!-- 页头 -->
     <header><span>星火英语</span></header>  
    <!-- <header><span>星火英语</span></header> -->
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item>
        <img
          src="https://ksimg.sparke.cn/images/english/2020/9/1089789359429900032.jpg"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://ksimg.sparke.cn/images/english/2021/6/1276156271101186304.jpg"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://ksimg.sparke.cn/images/english/2020/9/1089789488278918016.jpg"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://ksimg.sparke.cn/images/english/2021/8/1324354368327434560.jpg"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 类型选项 -->
    <div style="display:flex" class="d2" >
      <router-link to='/Curriculums' style="display:flex" class="d2-1" :id="item.id+''" v-for="(item,i) of cats" :key="i">
        <img :src="`${item.img}`" alt="" >
        <span>{{item.title}}</span>
        </router-link>
    </div>
    <!-- 精选课程 -->
    <div style="display:flex" class="d3"><span>精选课程</span></div>

    <!-- 卡片 -->
    <!-- 单一文章信息开始 -->
    <div class="articleItem" v-for="(item, i) in articles" :key="i" @click="Network">
      <!-- 文章图文信息开始 -->
      <div class="articleItem-wrapper">
        <!-- 文章图像开始  -->
        <div class="articleImg">
          <img v-if="item.pic" :src="`${item.pic}`" />
          <div class="articleItem-level">{{item. pic_title}}</div>
        </div>
        <div class="articleItem-post">
          <!-- 文章标题开始 -->
          <div class="articleItem-header">{{ item.title }}</div>
          <div class="articleItem-time">
            开课:{{ item.time }} | {{ item.hour }}
          </div>
          <!-- 标签 -->
          <div class="articleItem-teas" >
      
              <span class="articleItem-tea" >{{ item.teacher}}</span>
          
          </div> 
        </div>
      </div>
      <div class="articleItem-price">
        <span class="articleItem-price-hint">限购{{ item.limitNumber }}人</span>
        <span class="articleItem-price-number"
          >已有{{ item.orderNumber }}人购买</span
        >
        <span class="articleItem-price-o">¥199</span>
        <span class="articleItem-price-n">¥{{ item.price }}</span>
      </div>
    </div>

    <!-- 底部选项卡 -->
    <van-tabbar
      v-model="active"
      active-color="#222831"
      inactive-color="#bdc1c9"
    >
      <van-tabbar-item name="main">
        <span>首页</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.active : icon.inactive"
            style="height: 27px"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="book">
        <span>书城</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.active2 : icon.inactive2"
            style="height: 27px"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="me">
        <span>我的</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.active3 : icon.inactive3"
            style="height: 27px"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "main",
      navactive: "1",
      icon: {
        active: "/tabbar-logo/home_01.png",
        inactive: "/tabbar-logo/home_02.png",
        active2: "/tabbar-logo/store_01.png",
        inactive2: "/tabbar-logo/store_02.png",
        active3: "/tabbar-logo/mine_01.png",
        inactive3: "/tabbar-logo/mine_02.png"
      },
      articles: [],
      page: 1,
      cats: []
    };
  },
  watch: {
    /** 监听底部选项卡的变化 */
    active(newval) {
      if (newval == "main") {
        this.$router.push("/"); //  路径 / 映射到Home.vue
      } else if (newval == "book") {
        this.$router.push("/books"); // 路径 /book 映射到Book.vue
      } else if (newval == "me") {
        this.$router.push("/me"); // 路径 /me 映射到Me.vue
      }
    }
  },

  methods: {
    Network(){
            this.$router.push(`/Network`)
    }
  },

  /** 页面元素挂载完毕后执行该生命周期方法 */
  mounted() {
    // 发送http请求
    this.axios.get(`/course/category`).then(res => {
      // console.log(res);
      let cats = res.data.data; // [{},{},{}]
      // 存入data
      this.cats = cats;
    });
    this.axios.get(`/course/`).then(res => {
     // console.log(res);
      this.articles = res.data.data;
    });
  }
};
</script>

<style scoped>
header {
  width: 100%;
  height: 3.1rem;
  font-weight: 600;
  align-items: center;
  display: flex;
  position: fixed;
  background-color: white;
  z-index: 100;
}
header span {
  flex: 1;
  text-align: center;
  align-content: center;
  font-size: 1.25rem;
  line-height: 3.5rem;
  overflow: hidden;
}
.button {
  width: 100%;
  border: 0;
  background: white;
  color: black;
  font-size: 1.25rem;
}

.my-swipe .van-swipe-item img {
  display: inline-block;
  width: 100%;
  height: 10rem;
  margin-top: 3rem;
}
.van-grid-item__icon {
  background-color: black;
}

.d2 {
  /* height: 89px; */
  align-items: center;
  padding: 0.78125rem 1.375rem;
  justify-content: space-between;
}
.d2 .d2-1 {
  flex-direction: column;
  align-items: center;
  width: 4rem;
  height: 4rem;
}

.d2-1 img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 3.125rem;
  box-shadow: 0 0.625rem 1.25rem 0 rgb(0 0 0 / 20%);
}
.d2-1 span {
  font-size: 0.75rem;
  margin: 0.875rem 0rem 0rem;
  color: #222831;
}
.d3 {
  margin: 0.625rem 0 0;
}
.d3 span {
  width: 22.5rem;
  height: 1.6875rem;
  margin: 1.25rem 0rem 1.25rem 0.9375rem;
  color: #222831;
  font-size: 1.125rem;
  text-align: left;
  font-weight: 700;
}

.is-right a {
  color: white;
}
/* 卡片 */
.articleItem {
  display: flex;
  width: 21.5625rem;
  height: 8.25rem;
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;
  margin-bottom: 0.9375rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.3125rem 0.75rem 0 rgba(0, 0, 0, 0.2);
  flex-direction: column;
}
.articleItem-wrapper {
  display: flex;
}
.articleImg {
  width: 8.8125rem;
  height: 5.9375rem;
  position: relative;
}
.articleImg img {
  width: 7.875rem;
  height: 5.9375rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.articleItem-level {
  position: absolute;
  top: 0;
  right: 0;
  background-image: linear-gradient(90deg, #bdc9e2, #98a6c4);
  color: #fff;
  font-size: 0.875rem;
  padding: 0.15625rem 0.375rem;
  border-radius: 0 0 0 0.1875rem;
}
.articleItem-post {
  display: flex;
  flex-direction: column;
  width: 11.5rem;
  height: 5.9375rem;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}
.articleItem-header {
  font-size: 0.875rem;
  color: #222831;
  margin-top: 0.4375rem;
  width: 11.5rem;
  height: 37px;
  font-weight: 700;
  word-wrap: break-word;
  word-break: break-all;
}
.articleItem-time {
  margin-top: 0.4375rem;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: #c3c7cb;
}

.articleItem-teas {
  display: flex;
  margin-top: 0.5rem;
  height: 1rem;
  flex-direction: row;
}
.articleItem-tea {
  font-size: 0.875rem;
  color: #fff;
  line-height: 1rem;
  padding: 0 0.375rem;
  margin-right: 0.3125rem;
  background-color: #4c84ff;
  opacity: 0.4;
  border-radius: 0.5rem 0.5rem 0 0.5rem;
}
.articleItem-price {
  height: 2.3125rem;
  display: flex;
  align-items: center;
  border-bottom-left-radius: 0.1875rem;
  border-bottom-right-radius: 0.1875rem;
  background-color: #f6f7f8;
}
.articleItem-price-hint {
  font-size: 0.75rem;
  line-height: 1.125rem;
  margin-left: 0.9375rem;
  color: #8d95a1;
}
.articleItem-price-number {
  font-size: 0.75rem;
  width: 9.6025rem;
  line-height: 1.125rem;
  margin-left: 0.9375rem;
  color: #8d95a1;
}
.articleItem-price-o {
  font-size: 0.75rem;
  line-height: 1.125rem;
  margin-right: 0.625rem;
  text-decoration: line-through;
  color: #c3c7cb;
}
.articleItem-price-n {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  margin-right: 0.9375rem;
  color: #222831;
  font-weight: 700;
}
</style>




